<template>
  <div class="find">
    <van-nav-bar title="发现" />
    <!-- 面试技巧 -->
    <div class="skill">
      <navBar title="面试技巧"></navBar>
      <ul class="items">
        <faceItem
          :item="item"
          v-for="(item, index) in skillList"
          :key="index"
        ></faceItem>
      </ul>
    </div>
    <!-- 市场数据 -->
    <div class="data">
      <navBar title="市场数据"></navBar>
      <ul class="tags">
        <li class="tag">{{ city }}</li>
        <li class="tag">{{ position }}</li>
      </ul>
      <!-- 数据概览条 -->
      <ul class="items" v-if="showMore">
        <dataItem
          :topSalary="topSalary"
          :item="item"
          v-for="(item, index) in showHotList"
          :key="index"
        ></dataItem>
      </ul>
      <ul class="items" v-else>
        <dataItem
          :topSalary="topSalary"
          :item="item"
          v-for="(item, index) in hotCityList"
          :key="index"
        ></dataItem>
      </ul>
      <div class="more">
        <span v-if="showMore" @click="changeShow"
          >展开更多<i class="iconfont iconicon_zhankai"></i
        ></span>
        <span v-else @click="changeShow"
          >收起数据<i
            class="iconfont iconicon_zhankai"
            style="transform:rotate(180deg);"
          ></i
        ></span>
      </div>
    </div>
    <!-- 面经分享 -->
    <div class="share">
      <navBar title="面经分享"></navBar>
      <ul class="items">
        <shareItem
          :item="item"
          v-for="(item, index) in shareList"
          :key="index"
        ></shareItem>
      </ul>
    </div>
    <div class="foot">
      ————— 底线 —————
    </div>
  </div>
</template>

<script>
// 导入导航
import navBar from './navBar'
// 面试技巧组件
import faceItem from './faceItem'
// 数据进度条组件
import dataItem from './dataItem'
// 分享组件
import shareItem from './shareItem'
// API接口导入
import {
  getSkillList,
  getHotList,
  getShareList
} from '../../../api/articles.js'

export default {
  name: 'find',
  data () {
    return {
      skillList: [],
      // 热门城市数据
      hotCityList: [],
      showHotList: [],
      city: '',
      position: '',
      // 热门城市开关
      showMore: true,
      // 分享列表数据
      shareList: []
    }
  },
  methods: {
    changeShow () {
      this.showMore = !this.showMore
    }
  },
  components: {
    navBar,
    faceItem,
    dataItem,
    shareItem
  },
  async created () {
    // 面试技巧
    const resSkill = await getSkillList({ star: 0, limit: 3 })
    this.skillList = resSkill.data.list
    // 热门城市数据
    const resHot = await getHotList()
    console.log(resHot)
    this.city = resHot.data.city
    this.position = resHot.data.position
    this.hotCityList = resHot.data.yearSalary.reverse()
    this.showHotList = this.hotCityList.slice(0, 4)
    this.topSalary = resHot.data.topSalary
    // 面试分享
    const resShare = await getShareList({ star: 0, limit: 3 })
    this.shareList = resShare.data.list
  }
}
</script>

<style lang="less" scoped>
.find {
  background-color: #f7f4f5;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Semibold;
  /deep/ .van-nav-bar {
    height: 44px;
    .van-nav-bar__title {
      font-size: 18px;
      font-weight: bold;
    }
  }
  .skill {
    background-color: #fff;
    .items {
      padding: 0 15px 15px;
    }
  }
  .data {
    margin-top: 10px;
    background-color: #fff;
    .tags {
      display: flex;
      padding: 10px 15px;
      .tag {
        margin-right: 10px;
        padding: 2px 6px;
        font-size: 14px;
        color: #545671;
        line-height: 20px;
        background: #eceaea;
        border-radius: 4px;
      }
    }
    .items {
      padding: 0 15px;
    }
    .more {
      padding: 15px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #545671;
      i {
        display: inline-block;
        font-size: 12px;
        margin-left: 7px;
      }
    }
  }
  .share {
    margin-top: 10px;
    background-color: #fff;
    .items {
      padding: 0 15px;
    }
  }
  .foot {
    padding: 30px 0 80px;
    text-align: center;
    font-size: 14px;
    color: #b4b4bd;
    line-height: 20px;
  }
}
</style>
